<template>
  <m-page>
    <!-- 自动还款设置页 -->
    <m-header title="自动还款设置"></m-header>
    <!-- 卡信息 -->
    <div class="card_autoSet">
      <div class="card_list_item">
        <ynet-cell-item :title="formdata.name+' (尾号'+formdata.lastnumber+') '">
          <span class="holder" slot="left"></span>
          <span class="item_right" slot="right">
            <ynet-switch v-model="formdata.isSet"></ynet-switch>
          </span>
        </ynet-cell-item>
      </div>

      <div class="empty_box" v-if="formdata.isSet"></div>
      <!-- 自动还款信息项 -->
      <div class="autoPay_set" v-if="formdata.isSet">
        <!-- 付款方式 -->
        <ynet-field-item solid title="还款方式" :content="data.payment_way" />

        <!-- 选择付款账户 -->
        <ynet-field-item
          solid
          title="付款账户"
          :content="data.payment_account"
          arrow
          placeholder="请选择付款账户"
          @click="cardSelect()"
        />
        <md-selector
          v-model="isCardSelectorShow"
          :data="card_options"
          title="选择银行卡"
          large-radius
          @choose="onCardChoose"
          is-check
        >
          <template slot-scope="{ option, index, selected }">
            <div class="selector-item-body" :class="{selected}">
              <div class="selector-item-left">
                <span class="holder"></span>
              </div>
              <div class="selector-item-content">
                <p class="selector-item-title" v-text="option.text"></p>
                <p class="selector-item-brief" v-text="`${option.describe}`"></p>
              </div>
            </div>
          </template>
        </md-selector>

        <!-- 户名 -->
        <ynet-field-item solid title="户名" :content="data.account_name" />
        <!-- 还款币种 -->
        <ynet-field-item solid title="还款币种" :content="data.payment_currency" />
        <!-- 协议勾选项 -->
        <div class="agreement_checked">
          <md-agree v-model="checked" size="md" @change="onChange(checked)">
            我已阅读并同意
            <a href>《长沙银行支付计划服务协议》</a>
          </md-agree>
        </div>
        <!-- 按钮 -->
        <ynet-button type="warning" v-if="checked && data.payment_account !==''" @click="hadconfirm">确定</ynet-button>
        <ynet-button type="disabled" v-if="!checked || data.payment_account ==''">确定</ynet-button>
        <!-- 温馨提示 -->
        <div class="tips">
          <p>温馨提示：</p>
          <p>1、持卡人需提前或心意通卡到期日前足额还款，否则未归还部分将按万分之五/天收透支利息。</p>
          <p>2、自动还款每期仅还账单中的手续费，如您单笔心意通卡本金到期，需主动归还未还本金到心意通卡。</p>
        </div>
      </div>
    </div>
  </m-page>
</template>

<script>
import { Selector, Agree } from "mand-mobile";
import { CellItem, Switch, Field, FieldItem, Button } from "ynet-mobile";
import { goto } from "../utils/index"
export default {
  components: {
    [CellItem.name]: CellItem,
    [Switch.name]: Switch,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Agree.name]: Agree,
    [Button.name]: Button,
    [Selector.name]: Selector
  },
  data() {
    return {
      isCardSelectorShow: false, //付款账户选择列表显示
      formdata: {
        //心意通卡信息
        id: 1,
        name: "心意通信用卡",
        lastnumber: "1234",
        isSet: true
      },
      data: {
        // 页面表单数据
        payment_way: "按账单扣款（全额扣款）",
        payment_account: "",
        account_name: "李莎莎",
        payment_currency: "人民币"
      },
      checked: false, //协议单选框
      card_options: [
        // 银行卡列表
        {
          value: "A",
          text: "长沙银行储蓄卡（尾号8876）",
          describe: "可用余额100元"
        },
        {
          value: "B",
          text: "招行借记卡（尾号2345）",
          describe: "单笔金额30万元，每日限额300万元"
        },
        {
          value: "C",
          text: "邮政储蓄卡（尾号7532）",
          describe: "单笔金额30万元，每日限额300万元"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    //勾选按钮改变事件
    onChange(checked) {
      console.log(checked);
    },
    //确定按钮
    //点击按钮 出现取款密码校验框
    //校验通过跳至设置结果页
    hadconfirm() {
      app.api
        .showPaymentPad({
          title: "请输入付款账户取款密码",
          subTitle: "",
          randomKey: "6"
        })
        .then(res => {
          console.log(res.data.pass);
          goto("autopay_setting_result.html");
        });
    },
    //显示银行卡选择列表
    cardSelect() {
      this.isCardSelectorShow = true;
    },
    //银行卡列表选择事件
    onCardChoose({ text }) {
      this.data.payment_account = text;
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

